<template>
  <div class="flex check j-s-b">
    <div>
      <el-checkbox-group
        v-model="daychecked"
        :disabled="dayAll || day || isCustom"
      >
        <el-checkbox
          v-for="city in cities"
          :key="city"
          :label="city.label"
          :value="city.value"
          >{{ city.label }}</el-checkbox
        >
      </el-checkbox-group>
      <div>
        <el-checkbox
          v-model="eve"
          label="前夜"
          :disabled="dayAll || isCustom"
        />
        <el-checkbox
          v-model="aftEve"
          label="后夜"
          :disabled="dayAll || isCustom"
        />
      </div>
    </div>
    <div class="ml12">
      <div>
        <el-checkbox v-model="day" label="白天" :disabled="isCustom" />
      </div>
      <div>
        <el-checkbox v-model="dayAll" label="全日" :disabled="isCustom" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: string[];
    custom: boolean;
  }>(),
  {
    modelValue: false,
    custom: false,
  }
);
const cities = ref([
  { label: "上午", value: "am" },
  { label: "中午", value: "noon" },
  { label: "下午", value: "af" },
]);
const daychecked = ref([]);
const eve = ref<boolean>(false);
const aftEve = ref<boolean>(false);
const day = ref<boolean>(false);
const dayAll = ref<boolean>(false);
const check = {
  am: "",
  noon: "",
  af: "",
  eve: "",
  aftEve: "",
  day: "",
};
const emit = defineEmits(["update:modelValue"]);

const isCustom = computed(() => {
  return props.custom;
});
watch(
  () => props.custom,
  () => {
    if (props.custom) {
      aftEve.value = false;
      eve.value = false;
      daychecked.value = [];
      dayAll.value = false;
      day.value = false;
    }
  }
);
watch(eve, () => {
  if (eve.value) {
    aftEve.value = false;
  }
});
watch(aftEve, () => {
  if (aftEve.value) {
    eve.value = false;
  }
});
watch(day, () => {
  if (day.value) {
    daychecked.value = [];
    dayAll.value = false;
  }
});
watch(dayAll, () => {
  if (dayAll.value) {
    aftEve.value = false;
    eve.value = false;
    day.value = false;
    daychecked.value = [];
  }
});
watch(daychecked, () => {
  console.log(daychecked.value);
});

const getData = () => {
  return {
    aftEve: aftEve.value,
    eve: eve.value,
    daychecked: daychecked.value,
    dayAll: dayAll.value,
    day: day.value,
  };
};

defineExpose({
  getData,
});
</script>

<style lang="scss" scoped>
.check {
  display: flex;
  align-items: flex-end;
  margin-bottom: -22px;
}
</style>
